<template>
	<div class="hello">

		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th rowspan="2">期号</th>
				<th colspan="2">组合形态</th>
			</tr>
			<tr>
				<th>大小</th>
				<th>单双</th>
			</tr>
			<tr v-for="item in BackData">
				<td>{{item.No}}</td>
				<td class="big" v-if="item.HeZhiZuHeXingTai.DaOu==-2 || item.HeZhiZuHeXingTai.DaQi==-2">
					大
				</td>
				<td class="small" v-if="item.HeZhiZuHeXingTai.XiaoOu==-2 || item.HeZhiZuHeXingTai.XiaoQi==-2">
					小
				</td>
				<td class="big" v-if="item.HeZhiZuHeXingTai.DaOu==-2 || item.HeZhiZuHeXingTai.XiaoOu==-2">
					双
				</td>
				<td class="small" v-if="item.HeZhiZuHeXingTai.DaQi==-2 || item.HeZhiZuHeXingTai.XiaoQi==-2">
					单
				</td>

			</tr>
		</table>
		<ul>
			<li>大：{{da}}</li>
			<li>小：{{xiao}}</li>
			<li>单：{{dan}}</li>
			<li>双：{{ou}}</li>
			<li>大小间隔：{{daxiao}}</li>
			<li>单双间隔：{{danou}}</li>
		</ul>
		</ul>
		<audio id="test" controls="controls" >
			<source src="./3217.mp3" />
		</audio>
		<audio id="test2" controls="controls" >
			<source src="./3761.mp3" />
		</audio>
	</div>
</template>

<script>
	import $ from 'jquery';
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				BackData: [],
				da: 0,
				xiao: 0,
				daxiao: 0,
				danou: 0,
				dan: 0,
				ou: 0
			}
		},
		mounted() {
			this.getDate_()
			setInterval(() => {
				this.getDate_()
			}, 30000)

		},
		methods: {
			getDate_() {
				$.post('http://localhost:8070/admin', null, res => {
					console.log(JSON.parse(res.data))					
					let data = JSON.parse(res.data).BackData.Body.Body
					this.BackData = data.reverse();
					this.setDaXaio()
					this.setDanOu()
					this.setDaXiaoL()
					this.setDanOuL()
					setTimeout(() => {
						let l = 5
						if(this.da > l || this.xiao >l || this.dan > l || this.ou > l) {
							$('#test2')[0].play()
						}
						let ll = 2
						if(this.daxiao > ll || this.danou>ll) {
							$('#test')[0].play()
						}
					}, 10)

				})
			},
			setDaXaio() {
				let da = 0;
				let xiao = 0;
				let first = this.BackData[0];
				if(first.HeZhiZuHeXingTai.DaOu == -2 || first.HeZhiZuHeXingTai.DaQi == -2) {
					da++
				}
				if(first.HeZhiZuHeXingTai.XiaoOu == -2 || first.HeZhiZuHeXingTai.XiaoQi == -2) {
					xiao++
				}
				for(let i = 1; i < this.BackData.length; i++) {
					let item = this.BackData[i];
					if(da) {
						if((item.HeZhiZuHeXingTai.DaOu == -2 || item.HeZhiZuHeXingTai.DaQi == -2)) {
							da++
						} else {
							break;
						}
					}
					if(xiao) {
						if((item.HeZhiZuHeXingTai.XiaoOu == -2 || item.HeZhiZuHeXingTai.XiaoQi == -2)) {
							xiao++
						} else {
							break;
						}
					}

				}
				this.da = da;
				this.xiao = xiao;
			},
			setDanOu() {
				let dan = 0;
				let ou = 0;
				let first = this.BackData[0];
				if(first.HeZhiZuHeXingTai.DaOu == -2 || first.HeZhiZuHeXingTai.XiaoOu == -2) {
					ou++
				}
				if(first.HeZhiZuHeXingTai.DaQi == -2 || first.HeZhiZuHeXingTai.XiaoQi == -2) {
					dan++
				}
				for(let i = 1; i < this.BackData.length; i++) {
					let item = this.BackData[i];
					if(ou) {
						if(ou && (item.HeZhiZuHeXingTai.DaOu == -2 || item.HeZhiZuHeXingTai.XiaoOu == -2)) {
							ou++
						} else {
							break;
						}
					}
					if(dan) {
						if((item.HeZhiZuHeXingTai.DaQi == -2 || item.HeZhiZuHeXingTai.XiaoQi == -2)) {
							dan++
						} else {
							break;
						}
					}
				}
				this.dan = dan;
				this.ou = ou;
			},
			setDaXiaoL() {
				let da = 0;
				let xiao = 0;
				let len = 0
				let first = this.BackData[0];
				if(first.HeZhiZuHeXingTai.XiaoQi == -2 || first.HeZhiZuHeXingTai.XiaoOu == -2) {
					xiao++
				}
				if(first.HeZhiZuHeXingTai.DaQi == -2 || first.HeZhiZuHeXingTai.DaOu  == -2) {
					da++
				}
				for(let i = 1; i < this.BackData.length; i++) {
					let item = this.BackData[i];
					if(da) {
						if((item.HeZhiZuHeXingTai.XiaoOu  == -2 || item.HeZhiZuHeXingTai.XiaoQi == -2)) {
							len++
							console.log(len)
							da = 0;
							xiao = 1;
							continue
						} else {
							break;
						}
					}
					if(xiao) {
						if((item.HeZhiZuHeXingTai.DaOu == -2 || item.HeZhiZuHeXingTai.DaQi == -2)) {
							len++
							console.log(len)
							xiao = 0;
							da = 1
							continue
						} else {
							break;
						}
					}
				}
				
				setTimeout(()=>{
					console.log(len)
					this.daxiao = len;
				},10)
				

			},
			setDanOuL() {
				let dan = 0;
				let ou = 0;
				let len = 0
				let first = this.BackData[0];
				if(first.HeZhiZuHeXingTai.DaOu == -2 || first.HeZhiZuHeXingTai.XiaoOu == -2) {
					ou++
				}
				if(first.HeZhiZuHeXingTai.DaQi == -2 || first.HeZhiZuHeXingTai.XiaoQi == -2) {
					dan++
				}
				
				for(let i = 1; i < this.BackData.length; i++) {
					let item = this.BackData[i];
					if(ou) {
						if((item.HeZhiZuHeXingTai.DaQi == -2 || item.HeZhiZuHeXingTai.XiaoQi == -2)) {						
							len++
							ou = 0
							dan = 1
							continue
						} else {
							break;
						}
					}

					if(dan) {
						if((item.HeZhiZuHeXingTai.DaOu == -2 || item.HeZhiZuHeXingTai.XiaoOu == -2)) {
							len++
							dan = 0
							ou = 1
							continue
						} else {
							break;
						}
					}
				}
				this.danou = len;

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	
	
	th {
		width: 200px;
	}
	td{
		width: 60px;
	}
	.big {
		background-color: #ffffff;
		color: #000000;
	}
	
	.small {
		background-color: #000000;
		color: #FFFFFF;
	}
	
	ul {
		position: absolute;
		top: 10px;
		left: 10px;
		display: flex;
	}
	
	li {
		margin-left: 40px;
	}
</style>